<template>
	<view class="container">

		<view class="ordertab">
 			<u-tabs
				:list="tabslist"
				:scrollable="false"
				:current="tabscurrent"
				 @click="tabsClick">
			</u-tabs>
		</view>
		<u-empty :text="$t('nologin')" mode="data"  icon="https://i.yodin.com/storage/empty/permission.png" :show="!userInfo.token"></u-empty>
		<view v-if="userInfo.token">
			<view class="" v-if="tabscurrent==0">
				 <u-empty :text="$t('nodata')"
					mode="data"
					icon="https://i.yodin.com/storage/empty/order.png"
					v-if="loadstatus == false&&roborder_list.length === 0"
				></u-empty>
			<view v-else>
				<view v-for="(item, index) in roborder_list" :key="index">
					<view  class="u-padding-20">
					<view class="u-flex">
						<view class="u-flex-4">
							<view class="u-font-sm">{{ item.add_time }}</view>
						</view>
						<view class="u-flex-2 price">{{item.symbol}}{{ item.order_amount }}</view>
						<view class="u-font-lg u-success u-flex-middle">
							<u-button type="primary" size="mini" @click="jiedan(item)" text="接单"></u-button>
						</view>
					</view>
				
					<view class="b-b u-m-t-20"></view>
				
					<view class="u-p-t-20 u-p-b-20">
						<view class="u-p-b-20" @tap="$tools.goJump('/pagesPackageA/order/detail',{order_code:item.order_code},'','')">
							{{ orderGoodsName(item.order_detailed) }}
						</view>
					
					</view>
					<view class=" u-p-b-20">
						配送至：{{ item.region_fullname }} {{ item.address }}
					</view>
					</view>
					<u-gap height="6" bgColor="#F1F8FA"></u-gap>
				</view>
				<view v-if="roborder_list.length > 0">
				  <u-loadmore nomoreText="End" color="#dddddd" marginBottom="50" marginTop="50" :status="loadStatus" @loadmore="getOrders" line></u-loadmore>
				</view>
			</view>
				
				
				
			</view>
			
			<view class="" v-if="tabscurrent==1">

			<u-empty :text="$t('nodata')"
					mode="data"
					icon="https://i.yodin.com/storage/empty/order.png"
					v-if="loadstatus == false&&agentorder_list.length === 0"
			></u-empty>
			<view v-else>
				<view v-for="(item, index) in agentorder_list" :key="index">
					<view  class="u-padding-20">
					<view class="u-flex">
						<view class="u-flex-4">
							<view class="u-font-sm">{{ item.add_time }}</view>
						</view>
						<view class="u-flex-2 price">{{item.symbol}}{{ item.order_amount }}</view>
						<view class="u-font-lg u-success u-flex-middle">
							{{ item.order_status_txt }}
						</view>
					</view>
				
					<view class="b-b u-m-t-20"></view>
				
					<view class="u-p-t-20 u-p-b-20">
						<view class="u-p-b-20" @tap="$tools.goJump('/pagesPackageA/order/detail',{order_code:item.order_code},'','')">
							{{ orderGoodsName(item.order_detailed) }}
						</view>
					
						<view class="u-flex u-flex-between">
							<view class="u-flex-2 u-p-r-10">
								<u-button
								:disabled="item.oStatus==0?false:true"
								:type="item.oStatus==0?'error':'info'"
								size="mini"
								@click="deleteOrder(item.order_id)"
								text="删除"></u-button>
							</view>
							<view class="u-flex-2 u-p-r-10">
								<u-button type="primary" :disabled="(item.oStatus>1)?false:true" plain size="mini" @click="gochat(item)" text="客户沟通"></u-button>
							</view>
							<view class="u-flex-2 u-p-r-10">
								<u-button type="primary" :disabled="(item.oStatus>1)?false:true" plain size="mini" @click="editorder(item)" text="修改"></u-button>
							</view>
							<view class="u-flex-2 u-p-r-10">
								<u-button
								:disabled="item.oStatus>1?false:true"
								:type    ="item.oStatus>1?'warning':'success'"
								size="mini" @click="goshipping(item)" text="物流"></u-button>
							</view>
							<view class="u-flex-2">
								<u-button type="primary" size="mini" @click="operable_pop(item)" text="操作"></u-button>
							</view>
						</view>
					</view>
					</view>
					<u-gap height="6" bgColor="#F1F8FA"></u-gap>
				</view>
				<view v-if="flow_list.length > 0">
				  <u-loadmore nomoreText="End" color="#dddddd" marginBottom="50" marginTop="50" :status="loadStatus" @loadmore="getOrders" line></u-loadmore>
				</view>
			</view>
				



			</view>
		</view>
		
		
		<u-popup :show="operablepop_show"  mode="center" closeOnClickOverlay @close="operablepop_show=false;" :customStyle="{width: '96%',padding:'6px 10px'}" :round="10">
			<view class="modal-content">
			
			<u--form label-position="left" label-width="40">
				<u-form-item class="form-item" label="订单" >
				  <u-radio-group v-model="operableOrderStatus" placement="row">
					<u-radio v-for="(oorder, index) in operableItem.order"
						:label="oorder.title"
						:key="index"
						:labelSize="14" :size="14"
						:customStyle="{marginRight: '16px'}"
						:name="oorder.value">
					</u-radio>
				  </u-radio-group>
				</u-form-item>
				<u-form-item class="form-item" label="支付">
				  <u-radio-group v-model="operablePayStatus" placement="row">
					<u-radio v-for="(oorder, index) in operableItem.pay"
						:label="oorder.title"
						:key="index"
						:labelSize="14" :size="14"
						:customStyle="{marginRight: '16px'}"
						:name="oorder.value">
					</u-radio>
				  </u-radio-group>
				</u-form-item>
				
				<u-form-item class="form-item" label="物流">
				  <u-radio-group v-model="operableShippingStatus" placement="row">
					<u-radio v-for="(oorder, index) in operableItem.shipping"
						:label="oorder.title"
						:key="index"
						:labelSize="14" :size="14"
						:customStyle="{marginRight: '16px'}"
						:name="oorder.value">
					</u-radio>
				  </u-radio-group>
				</u-form-item>
				<u-form-item  label="备注" prop="user_note">
					<u--input v-model="log_user_note" placeholder="请填写备注"  type="text"/>
				</u-form-item>
				<view class="u-flex u-flex-fill"><button type="primary" class="pay_btn u-m-b-20" size="mini" :disabled="loadstatus" :loading="loadstatus" @tap="submitLog">提交</button></view>
				
			</u--form>

				<scroll-view scroll-y="true"  style="height: 360rpx;">
					<view class="" v-for="(log, index) in orderLog">
						<u-divider :text="$tools.dateFormat('YYYY-mm-dd HH:MM',log.add_time)" :dashed="true"></u-divider>

							 <!--log.add_time | timeStamp-->
							 <view>{{log.action_desc}} <text class="u-p-l-20" v-if="log.action_note!=''"> ㊟ {{log.action_note}} </text></view>
	
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<u-popup :customStyle="{width: '96%',padding:'6px 10px'}" :round="10" :show="shippingPoP" @close="shippingPoP = false" mode="center" closeOnClickOverlay>
		   <view class="modal-content">
				
		<u--form labelWidth="70">
			<u-form-item label="收货人" :borderBottom="true">
				<u--input placeholder="" type="text" v-model="orderItem.consignee"></u--input>
			</u-form-item>
			<u-form-item label="联系手机" :borderBottom="true">
				<u--input placeholder="" type="text" v-model="orderItem.mobile"></u--input>
			</u-form-item>
			<u-form-item label="收货地址" :borderBottom="true">
				<u--input placeholder="" type="text" v-model="orderItem.address"></u--input>
			</u-form-item>

			<u-form-item label="快递公司" borderBottom @click="showkudi100()">
				<u--input
						v-model="orderItem.express_name"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择"
						border="none"
				></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
				<u-picker :show="showSelectKuaidi" :columns="kuaiducodelist" @confirm="kdSelect" @cancel="showSelectKuaidi = false" keyName="label"></u-picker>
			</u-form-item>

			<u-form-item label="快递单号" :borderBottom="true">
				<u--input placeholder="" type="text" v-model="orderItem.express_order"></u--input>
				<text slot="right" class="u-p-l-20">
					<u-icon name="iconfontsaoyisao"
						size="30"
						labelColor="#63E5CB"
						color="#63E5CB"
						custom-prefix="customicon">
					</u-icon>
				</text>
			</u-form-item>
		<u-gap height="20" ></u-gap>
		<view class="u-flex u-flex-fill">
			<view class="u-flex-5"><u-button type="info" size="large" @tap="clipboardcopy()">复制快递信息</u-button></view>
			<view class="u-flex-7 u-p-l-20"><u-button type="primary" size="large" @tap="savejisongkuaidi()">确认</u-button></view>
		</view>



				<u-divider text="快递100" :dashed="true"></u-divider>
				<view v-if="kd100path!=''">
				<!--#ifdef MP-WEIXIN-->
				<navigator target="miniProgram" open-type="navigate" app-id="wx6885acbedba59c14" :path="kd100path" extra-data="" version="release">查看快递信息</navigator>
				<!--#endif-->
				<!--#ifdef H5-->
					<u-button type="info" size="mini"
					 @click="$tools.goJump('/pagesPackageA/info/webview',{url:kd100h5path},'','')">查看快递信息</u-button>
				<!--#endif-->
				</view>


		<u-gap height="10" ></u-gap>
		</u--form>
				
		   	</view>
		</u-popup>
		<u-popup :customStyle="{width: '96%',padding:'6px 10px'}" :round="10" :show="editorderPoP" @close="editorderPoP = false" mode="center" closeOnClickOverlay>
		   <view class="modal-content">
				
		<u--form labelWidth="70">
			<u-form-item label="收货人">
				<u--input placeholder="" type="text" v-model="orderItem.consignee"></u--input>
			</u-form-item>
			<u-form-item label="联系手机">
				<u--input placeholder="" type="text" v-model="orderItem.mobile"></u--input>
			</u-form-item>
			<u-form-item label="收货地址" :borderBottom="true">
				<u--input placeholder="" type="text" v-model="orderItem.address"></u--input>
			</u-form-item>
			
			<u-form-item label="商品总价">
				<u--input placeholder="" type="text" v-model="orderItem.order_amount" disabled></u--input>
			</u-form-item>
<!-- 			<u-form-item label="包装费">
				<u--input placeholder="" type="text" v-model="orderItem.mobile"></u--input>
			</u-form-item> -->
			<u-form-item label="配送费">
				<u--input type="text" v-model="orderItem.shipping_fee" disabled></u--input>
			</u-form-item>
			
		<u-gap height="20" ></u-gap>
		<u-button type="primary" size="large" @tap="savejisongkuaidi()">修改订单信息</u-button>

		<u-gap height="10" ></u-gap>
		</u--form>
				
		   	</view>
		</u-popup>
		
		
		
		
		
		
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex'
	import { setPay } from "@/config/pay";
	import fNavbar from '@/components/module/f-navbar/f-navbar';
	import {api_agent_listagent,api_agent_listrob,api_order_view,api_order_kdcode,api_order_edit,api_order_log_add,api_order_del,api_agent_roborder } from '@/config/api.js';
	export default {
    components:{
        fNavbar
    },
		data() {
			return {
				page: 1,
				pageSize: 5,
				flow_list: [],
				agentorder_list:[],
				roborder_list:[],
				loadstatus:false,
				loadStatus: 'loadmore',
				pay_coininfo_id: '',
				tabscurrent: 0,
				tabslist: [
					{name: '抢单订单看板'},
					{name: '已抢到的订单'},
				  ],
				orderItem:[],
				operablepop_show:false,
				operableItem:[],
				operableOrderStatus:'0',
				operableShippingStatus:'0',
				operablePayStatus:'0',
				orderLog:[],
				log_user_note:'',
				logOrderid:'',
				shippingPoP:false,
				editorderPoP:false,
				showSelectKuaidi:false,
				kuaiducodelist:[],
				kd100path:'',
				kd100h5path:''
			}
		},
		computed: {
			...mapState(["userInfo"]),
			orderGoodsName() {
				return (order_detailed) => {
					let arr = []
					order_detailed.forEach(order_detailed => arr.push(order_detailed.goods_name + ' '+order_detailed.property+' * ' + order_detailed.num))
					return arr.join('，')
				}
			}
		},
		async onLoad() {
			await this.get_robOrders(false)
			
		},
		async onReachBottom() {
			if (this.loadStatus=='loadmore'){
				await this.get_robOrders(false)
			}
		},
		async onPullDownRefresh() {
			this.page=1
			this.roborder_list=[]
			this.agentorder_list=[]
			await this.get_robOrders(true)
			await this.get_agentOrders(false)
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 100);
		},
		methods: {
			tabsClick(e){
				this.tabscurrent = e.index
				if(this.tabscurrent==1){
					api_order_kdcode({}).then(res => {
							this.kuaiducodelist[0] = res;
					}).catch((e)=>{});
					
					this.agentorder_list=[]
					this.page=1
					this.get_agentOrders(false)
				}
			},
			gochat(item){
				this.$tools.goJump('/pagesPackageA/chat/chat',{messageId:'order'+item.order_code},'','to')
			},
			jiedan(item){
			uni.showModal({
                title: this.$t('tips'),
                content: '请确认能在24小时内发货，....',
				confirmText: this.$t('confirm'),
				cancelText: this.$t('cancel'),
				success: (res) => {
				  if (res.confirm) {
					api_agent_roborder({
						order_id:item.order_id
					}).then((res) => {
						this.page=1
						this.roborder_list=[]
						this.agentorder_list=[]
						this.get_robOrders(true)
						this.get_agentOrders(false)
						this.tabscurrent=1
					}).catch((err) =>{})
				  }
				},
			});
			},
			
			async get_robOrders(isRefresh = false) {
				await api_agent_listrob({}).then(res => {
						console.log(res)
						this.loadstatus = false;
						if (res.count > 0) {
							if (this.page <= res.pages) {
								res.list.map((item) => {
									this.roborder_list.push(item);
								})
								if (this.page==res.pages)this.loadStatus = "nomore";
							  this.page += 1;
							} else {
							  this.loadStatus = "nomore";
							}
						}
				}).catch((e)=>{});
			},
			
			
			async get_agentOrders(isRefresh = false) {
				await api_agent_listagent({}).then(res => {
						console.log('res',res)
						this.loadstatus = false;
						if (res.count > 0) {
							if (this.page <= res.pages) {
								res.list.map((item) => {
									this.agentorder_list.push(item);
								})
								if (this.page==res.pages)this.loadStatus = "nomore";
							  this.page += 1;
							} else {
							  this.loadStatus = "nomore";
							}
						}
				}).catch((e)=>{});
			},

		goshipping(order){
			this.shippingPoP=true;
			this.orderItem = {
				order_id:order.order_id,
				consignee:order.consignee,
				mobile:order.mobile,
				address:order.address,
				express_order:order.express_order,
				express_name:order.express_name,
				express_code:order.express_code,
				order_detailed:order.order_detailed
			}
			if (this.orderItem.express_order!=''){
				this.kd100path="pages/result/result?nu="+this.orderItem.express_order+"&com="+this.orderItem.express_code+"&querysource=third_xcx"
				this.kd100h5path="https://m.kuaidi100.com/app/query/?com="+this.orderItem.express_code+"&nu="+this.orderItem.express_order+"&coname="
			}
			
			// console.log(this.orderItem)
			// this.$api("order.order_getkuaidi100", {
			//   express_code:this.orderItem.express_code,
			//   express_order:this.orderItem.express_order
			// }).then((res) => {
			// 	console.log(res);
			// 	if (res.code == 200) {
			// 	  this.kd100List = res.data;
			// 	}
			//   }).catch((e) => {});
			//this.agentorder_list = [];
			//this.page = 1;
			//this.getOrders(false)
		}, 
		editorder(order){
			this.editorderPoP=true;
			this.orderItem = {
				order_id:order.order_id,
				consignee:order.consignee,
				mobile:order.mobile,
				address:order.address,
				order_amount:order.order_amount,
				shipping_fee:order.shipping_fee
			}
		},
		showkudi100(){
			this.showSelectKuaidi = true;uni.hideKeyboard();
		},
		kdSelect(e){
				console.log(e)
				this.showSelectKuaidi=false
				this.orderItem.express_name = e.value[0].label
				this.orderItem.express_code = e.value[0].express_code
		},
		clipboardcopy() {
		  let that = this;
		  let detailed=this.orderGoodsName(this.orderItem.order_detailed);
		  let ordercopyInfo = this.orderItem.express_name+this.orderItem.express_order+'\r'+this.orderItem.address+" "+this.orderItem.mobile+" "+this.orderItem.consignee+" \r "+detailed;
		  uni.setClipboardData({
			data: ordercopyInfo,
			success: function (data) {
			  that.$u.toast("快递信息已复制成功");
			},
			fail: function (err) {},
			complete: function (res) {},
		  });
		},
		savejisongkuaidi(){
			console.log(this.orderItem)
			api_order_edit(this.orderItem).then((res) => {
				console.log(res);
				  this.editorderPoP=false;
				  this.shippingPoP=false;
						this.page=1;
						this.agentorder_list=[];
						this.get_agentOrders();
			  }).catch((e) => {});
		},
		submitLog(){
			this.loadstatus=true
				api_order_log_add({
					order_id:this.logOrderid,
					order_status:this.operableOrderStatus,
					pay_status:this.operablePayStatus,
					shipping_status:this.operableShippingStatus,
					user_note:this.log_user_note
				}).then(res => {
						this.page=1;
						this.agentorder_list=[];
						this.get_agentOrders();
						this.operablepop_show=false
						this.log_user_note=''
						this.loadstatus=false
				}).catch((e)=>{this.loadstatus=false});
		},
		operable_pop(order){
			this.logOrderid=order.order_id
			this.operablepop_show=true
			this.operableItem=order.operableItem
			console.log(order)
			this.operableOrderStatus=order.order_status
			this.operablePayStatus=order.pay_status
			this.operableShippingStatus=order.shipping_status
			this.orderLog=order.log
		},
		deleteOrder(id){
			api_order_del({
					order_id:id,
				}).then(res => {
						this.page=1;
						this.agentorder_list=[];
						this.get_agentOrders();
				}).catch((e)=>{});
		},
		
		
		}
	}
</script>

<style lang="scss" scoped>
	page,body{
		height: 100%;
	}
	.ordertab{
		background: #ffffff;
		border-bottom: solid 1px #eee;
	}
	.orderbox{
		margin: 10px;
		border: #e8e8e8 solid 1px;
		border-radius: 10px;
	}
</style>
